<template>
    <div>
        <div>栅格系统</div>
        <el-row :gutter="20">
            <el-col :span="12" :xs="24">军事</el-col>
            <el-col :span="12">新闻</el-col>
        </el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary" size="small" plain loading>主题颜色</el-button>
        <el-button :icon="Download">我爱你祖国</el-button>
    </div>
    <h1>form标签使用</h1>
    <el-form :model="formData" :rules="rules">
        <el-form-item label="账号" prop="username">
            <el-input type="text" placeholder="请你输入账号" v-model="formData.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请你输入密码" v-model="formData.password" />
        </el-form-item>
        <el-form-item>

        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
//表单验证第一步:form组件表单数据收集到那个对象的身上
//表单验证第二步:书写表单验证规则,form添加一个rules属性

//收集表单的数据
const formData = reactive({
    username: '',
    password: ''
});

const rules = {
    //规则对象
    //required:代表务必书写规则前面多出五角星
    //message:错误提示消息
    //min|max:最大数值|最小数值
    //触发时机trigger:blur|change
    username: [
        { required: true, message: '至少五位', min: 5, trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码最多八位', max: 8, trigger: 'change' }
    ]
}

</script>

<style scoped></style>